<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>易优名品</title>
    <link rel="stylesheet" href="__LayUI__/css/layui.css">
    <link rel="stylesheet" href="__Admin__/css/admin.scss">
    <script src="__HOME__/js/jquery-3.2.1.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
   {include file="layout/head" /}

    {include file="layout/sidebar" /}

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div id="mainContain">
            <div class="layui-row">
                <a href="{:url('article/add')}">添加文章</a> 
                
            </div>
            <form id="tab_article" class="layui-form" action="changeState" method="post">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>所属分类</th>
                        <th>缩略图</th>
                        <th>是否显示为轮播</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="res" id="vo"}
                    <tr>
                        <td>
                            {$vo.id}
                        </td>
                        <td><?php echo substr($vo['title'],0,12);if(strlen($vo['title'])>12)echo"..." ?></td>
                        <td>{$vo.author}</td>
                        <th>{$vo.catename}</th>
                        <td>{if condition="$vo['pic'] neq '' "}
                            <img  height="50" src="{$vo.pic}" alt="">
                            {else}
                            暂无缩略图
                            {/if}
                        </td>
                        <td>
                            <input data-id={$vo.id} name='show' {if condition="$vo['show'] eq 1"} checked {else} {/if} lay-filter="slider" type="checkbox" title="轮播"><div {if condition="$vo['show'] eq 1"} class="layui-unselect layui-form-checkbox layui-form-checked" {else} class="layui-unselect layui-form-checkbox" {/if}><span>轮播</span><i class="layui-icon layui-icon-ok"></i></div>
                        </td>
                        <td>
                            <a href="{:url('edit',array('id'=>$vo['id']))}">修改</a>
                            <a href="{:url('del',array('id'=>$vo['id']))}">删除</a>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
            </form>
            <nav>
                {$res->render()}
            </nav>
        </div>
    </div>

    {include file="layout/footer" /}

</div>
<script src="__LayUI__/layui.js"></script>
<script>
    layui.use(['element','form','layer'], function(){
        var layer=layui.layer;
        var form = layui.form;
        form.on('checkbox(slider)', function(data){
            console.log(data.elem.checked); //是否被选中，true或者false
           var $str=""
            $str="id="+data.elem.getAttribute("data-id") +"&&";
            if(data.elem.checked){
                var $str1="show="+ 1  ;
            }else{
                var $str1="show="+ 0  ;
            }
            $str += $str1
            $.ajax({
                type: "POST",
                url: "{:url('changeState')}",
                dataType: "json",
                data:$str,
                success: function(json){
                   var code=JSON.parse(json)['res'];
                   if(code=="success"){
                       layer.open({
                           title:false,
                           content: '修改成功'
                       });
                   }
                },
                error:function (data) {
//                    console.log(data);
                }
            });

        });
    });
</script>
</body>
</html>